<template>
	<view class="container">
		<!-- 顶部统计卡片 -->
		<view class="stat-card">
			<view class="stat-header">
				<text class="title">待办统计</text>
				<text class="date">{{currentDate}}</text>
			</view>
			<view class="stat-content">
				<view class="stat-item">
					<text class="number">{{totalCount}}</text>
					<text class="label">总待办</text>
				</view>
				<view class="stat-item">
					<text class="number">{{completedCount}}</text>
					<text class="label">已完成</text>
				</view>
				<view class="stat-item">
					<text class="number">{{importantCount}}</text>
					<text class="label">重要</text>
				</view>
			</view>
		</view>

		<!-- 时间分组 -->
		<view class="section">
			<view class="section-title">时间分组</view>
			<view class="group-list">
				<view class="group-item" @tap="navigateToList('today')">
					<view class="group-info">
						<image src="/static/calendar.png" class="icon"></image>
						<view class="group-detail">
							<text class="group-name">今日待办</text>
							<text class="group-count">{{todayCount}}个待办</text>
						</view>
					</view>
					<image src="/static/right-arrow.png" class="arrow-icon"></image>
				</view>
			</view>
		</view>

		<!-- 重要程度分组 -->
		<view class="section">
			<view class="section-title">重要程度</view>
			<view class="group-list">
				<view class="group-item" @tap="navigateToList('important')">
					<view class="group-info">
						<image src="/static/starfilled.png" class="icon"></image>
						<view class="group-detail">
							<text class="group-name">重要待办</text>
							<text class="group-count">{{importantCount}}个待办</text>
						</view>
					</view>
					<image src="/static/right-arrow.png" class="arrow-icon"></image>
				</view>
				<view class="group-item" @tap="navigateToList('normal')">
					<view class="group-info">
						<image src="/static/star.png" class="icon"></image>
						<view class="group-detail">
							<text class="group-name">普通待办</text>
							<text class="group-count">{{normalCount}}个待办</text>
						</view>
					</view>
					<image src="/static/right-arrow.png" class="arrow-icon"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentDate: '',
			totalCount: 0,
			completedCount: 0,
			importantCount: 0,
			todayCount: 0,
			normalCount: 0
		}
	},
	onShow() {
		this.initDate()
		this.loadStatistics()
	},
	methods: {
		initDate() {
			const date = new Date()
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			this.currentDate = `${year}年${month}月${day}日`
		},
		async loadStatistics() {
			try {
				uni.showLoading({
					title: '加载中...'
				})
				
				// 使用已有的 ListTodolist 云函数获取未完成和已完成的数据
				const [unfinishedRes, finishedRes] = await Promise.all([
					uniCloud.callFunction({
						name: 'ListTodolist',
						data: { index: 0 }  // 未完成
					}),
					uniCloud.callFunction({
						name: 'ListTodolist',
						data: { index: 1 }  // 已完成
					})
				])
				
				// 获取所有数据
				const allTodos = [...(unfinishedRes.result.data || []), ...(finishedRes.result.data || [])]
				
				// 计算统计数据
				const today = new Date()
				const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
				
				this.totalCount = allTodos.length
				this.completedCount = finishedRes.result.data.length
				this.importantCount = allTodos.filter(item => item.strWarn === '重要').length
				this.todayCount = allTodos.filter(item => item.strDate.startsWith(todayStr)).length
				this.normalCount = allTodos.filter(item => item.strWarn !== '重要').length
				
				uni.hideLoading()
			} catch (err) {
				console.error('加载统计数据失败:', err)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			}
		},
		navigateToList(type) {
			// 根据类型跳转到对应的列表
			switch(type) {
				case 'today':
					uni.switchTab({
						url: '/pages/list/list'
					})
					break
				case 'important':
					uni.navigateTo({
						url: '/pages/list/list?type=important'
					})
					break
				case 'normal':
					uni.navigateTo({
						url: '/pages/list/list?type=normal'
					})
					break
			}
		}
	}
}
</script>

<style>
.container {
	padding: 30rpx;
	background: linear-gradient(to bottom, #f6f7f9, #ffffff);
	min-height: 100vh;
}

/* 统计卡片样式优化 */
.stat-card {
	background: linear-gradient(135deg, #7F7FD5, #86A8E7, #91EAE4);
	border-radius: 24rpx;
	padding: 40rpx;
	color: #fff;
	margin-bottom: 40rpx;
	box-shadow: 0 8rpx 20rpx rgba(127, 127, 213, 0.2);
	position: relative;
	overflow: hidden;
}

.stat-card::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
	transform: rotate(30deg);
}

.stat-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40rpx;
}

.stat-header .title {
	font-size: 40rpx;
	font-weight: 600;
	letter-spacing: 2rpx;
}

.stat-header .date {
	font-size: 26rpx;
	opacity: 0.9;
	background: rgba(255, 255, 255, 0.2);
	padding: 8rpx 20rpx;
	border-radius: 30rpx;
}

.stat-content {
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 1;
}

.stat-item {
	text-align: center;
	flex: 1;
	position: relative;
}

.stat-item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 20%;
	height: 60%;
	width: 2rpx;
	background: rgba(255, 255, 255, 0.2);
}

.stat-item .number {
	font-size: 52rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 12rpx;
	text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
}

.stat-item .label {
	font-size: 26rpx;
	opacity: 0.9;
}

/* 分组部分样式优化 */
.section {
	margin-bottom: 40rpx;
	animation: slideUp 0.5s ease-out;
}

.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 20rpx;
	padding-left: 16rpx;
	position: relative;
}

.section-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 25%;
	height: 50%;
	width: 6rpx;
	background: #7F7FD5;
	border-radius: 3rpx;
}

.group-list {
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
}

.group-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 34rpx;
	border-bottom: 1rpx solid rgba(0,0,0,0.05);
	transition: all 0.3s ease;
}

.group-item:active {
	background: #f8f9fa;
}

.group-info {
	display: flex;
	align-items: center;
}

.icon {
	width: 48rpx;
	height: 48rpx;
	margin-right: 24rpx;
	transition: all 0.3s ease;
}

.group-item:active .icon {
	transform: scale(1.1);
}

.group-detail {
	display: flex;
	flex-direction: column;
}

.group-name {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 8rpx;
	font-weight: 500;
}

.group-count {
	font-size: 24rpx;
	color: #999;
	background: #f7f8fa;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.arrow-icon {
	width: 32rpx;
	height: 32rpx;
	opacity: 0.4;
	transition: all 0.3s ease;
}

.group-item:active .arrow-icon {
	transform: translateX(4rpx);
}

/* 添加动画效果 */
@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 添加渐变背景动画 */
@keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.stat-card {
	background-size: 200% 200%;
	animation: gradientBG 15s ease infinite;
}
</style>